<template>
  <nut-popup position="bottom" v-model:visible="show">
    <nut-date-picker v-model="currentDate" :min-date="minDate" :max-date="maxDate" @confirm="confirm" :is-show-chinese="false">

    </nut-date-picker>
  </nut-popup>
  <view class="header_searchs">
    <view class="top">
      <view class="left">
        <!-- <nut-searchbar v-model="props.keyWords" >
          <template v-slot:leftin>
            <Search2 />
          </template>
        </nut-searchbar> -->
        <nut-searchbar v-model="query.keyWords" @search="search" placeholder="请输入关键字或承运单号查询" >
            <template v-slot:leftin>
                <Search2 />
            </template>
          
        </nut-searchbar>
      </view>
      <view class="right" @click="openSelectMethod">
        <RectDown class="icon" color="#0966FF" v-if="openSelect"></RectDown>
        <RectUp class="icon" v-else></RectUp>
        <view class="text" :class="{blue:openSelect}">筛选</view>
      </view>
    
    <!-- <view class="bottom" v-if="!openSelect">
      <view class="o">
        <view class="text">全部（收/寄）</view>
        <RectDown class="icon"></RectDown>
      </view>
      <view class="o">
        <view class="text">全部（状态）</view>
        <RectDown class="icon"></RectDown>
      </view>
    </view> -->
  
  <div class="model" v-show="openSelect" v-if="openSelect">
  <view class="top_active" >
    <!-- <h2>收/寄状态</h2>
    <view class="middel">
      <view class="div" :class="{blues:getSend == ''}" @click="getSend = ''">全部</view>
      <view class="div" :class="{blues:getSend == '1'}" @click="getSend = '1'">我寄的</view>
      <view class="div" :class="{blues:getSend == '2'}" @click="getSend = '2'">我收的</view>
    </view> -->
    <!-- <h2 style="margin-bottom:24rpx">时间范围</h2> -->
    <view class="top">
      <view class="data_div" @click="chooseTime(1)">近7天</view>
      <view class="data_div" @click="chooseTime(2)">近1个月</view>
      <view class="data_div" @click="chooseTime(3)">近2个月</view>
      <view class="data_div" @click="chooseTime(4)">近3个月</view>
    </view>
    <view class="bottom">
      <view class="date_choose_div" @click="openSwich(1)">{{start == ''?'开始时间':start }}</view>
      <view class="text">—</view>
      <view class="date_choose_div" @click="openSwich(2)">{{end == ''?'结束时间':end }}</view>
    </view>
  </view>
  <view class="foot_active" >
    <view class="bt_left" @click="reStart">重置</view>
    <view class="bt_right" @click="sure">确定</view>
  </view>
</div>
</view>
<nut-overlay overlay-class="costomModel" z-index="1900" v-model:visible="modelShow" @click="openSelectMethod"></nut-overlay>
</view>
</template>
<script lang="ts" setup>
import { Search2, RectDown, RectUp } from "@nutui/icons-vue-taro";
import dayjs from "dayjs";
//
import { ref } from "vue";

//打开日历
const startOrEnd = ref<number>(1);
const start = ref<string>("");
const end = ref<string>("");
const show = ref(false);
const minDate = new Date(2020, 0, 1);
const maxDate = new Date(2025, 10, 1);
const currentDate = new Date(2022, 4, 10, 10, 10);
const modelShow = ref(false)
const confirm = ({ selectedValue, selectedOptions }) => {
  if (startOrEnd.value == 1) {
    start.value = selectedOptions.map((option) => option.text).join("-");
  } else {
    end.value = selectedOptions.map((option) => option.text).join("-");
  }
  show.value = false;
};
const emit = defineEmits<{
  (e: "quryList", item: { start: string; end: string; flag: string });
  (e: "search", keyWords:string);
}>();
const props = defineProps<{
  query: {keyWords:string};
}>();
function search(){
  console.log(props.query.keyWords,'keyWords');
  openSelect.value=false
  modelShow.value =false
  emit("search",props.query.keyWords);
}
function sure() {
  openSelect.value=false
  modelShow.value =false
  emit("quryList", { start: start.value, end: end.value, flag: getSend.value });
}
function openSwich(index: number) {
  show.value = true;
  startOrEnd.value = index;
}

function reStart() {
  start.value = "";
  end.value = "";
  getSend.value = "";
  openSelect.value=false
  modelShow.value =false
  emit("quryList", { start: start.value, end: end.value, flag: getSend.value });
}

//筛选按钮
const openSelect = ref<boolean>(false);
const searchValue = ref<string>("");
function openSelectMethod() {
  console.log(openSelect.value);
  modelShow.value = !modelShow.value
  openSelect.value = !openSelect.value;
}

const getSend = ref<string>("");
function chooseTime(index) {
  console.log(index);

  end.value = dayjs().format("YYYY-MM-DD");
  if (index == 1) {
    // 计算过去七天的日期
    const lastWeek = dayjs().subtract(7, "day");
    console.log(lastWeek.format("YYYY-MM-DD"), "hahhaha");
    start.value = lastWeek.format("YYYY-MM-DD");
  } else if (index == 2) {
    start.value = dayjs().subtract(1, "month").format("YYYY-MM-DD");
  } else if (index == 3) {
    start.value = dayjs().subtract(2, "month").format("YYYY-MM-DD");
  } else if (index == 4) {
    start.value = dayjs().subtract(3, "month").format("YYYY-MM-DD");
  }
}
</script>

<style lang="scss">
.blue {
  color: #0966ff !important;
}
.blues {
  background: rgba(9, 102, 255, 0.05) !important;
  border: 1rpx solid #0966ff !important;
  color: #0966ff !important;
}
.header_searchs {
  width: 100%;
  //   height: 218rpx;
  background: white;
  padding: 24rpx;
  padding-top: 12rpx;
  padding-bottom: 12rpx;
  box-sizing: border-box;
  .top {
    width: 100%;
    height: 96rpx;
    display: flex;
    align-items: center;
    position: relative;
    .left {
      width: 590rpx;
      height: 72rpx;
      .nut-searchbar__search-input {
        background: #f5f5f5;
      }
      .nut-searchbar {
        padding: 0;
      }
    }
    .model {
      top: 211rpx;
      left: 0;
      z-index: 1998;
      position: fixed;
    }
    .right {
      display: flex;
      align-items: center;
      .icon {
        margin: 0 10rpx;
      }
      .text {
        font-family: PingFangSC-Regular;
        font-size: 24px;
        color: #666666;
      }
    }
  }
  .bottom {
    width: 100%;
    height: 96rpx;
    display: flex;
    align-items: center;
    .o {
      width: 50%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      .text {
        font-family: PingFang SC;
        font-size: 24rpx;
        color: #666666;
      }
    }
  }
}
.top_active {
  width: 750rpx;
  //   height: 232rpx;

  background: #f5f5f5;
  padding: 24rpx;

  box-sizing: border-box;
  .middel {
    width: 750rpx;
    height: 136rpx;
    display: flex;
    align-items: center;
    .div {
      width: 218rpx;
      height: 72rpx;
      border-radius: 88rpx;
      margin-right: 24rpx;
      font-family: PingFang SC;
      font-size: 28rpx;

      /* 文字2 */
      color: #666666;

      /* 自动布局 */
      display: flex;

      justify-content: center;
      align-items: center;

      /* 纯白 */
      background: #ffffff;

      border: 1px solid rgba(0, 0, 0, 0.06);
    }
  }
  .top {
    width: 100%;
    height: 66rpx;
    display: flex;
    align-items: center;
    .data_div {
      width: 158px;
      height: 72rpx;
      border-radius: 88rpx;
      /* 纯白 */
      background: #ffffff;
      margin-left: 24rpx;
      border: 1rpx solid rgba(0, 0, 0, 0.06);
      display: flex;
      align-items: center;
      justify-content: center;

      font-family: PingFang SC;
      font-size: 28rpx;

      color: #666666;
    }
  }
  .bottom {
    width: 100%;
    // height: 66rpx;
    margin-top: 24rpx;
    display: flex;
    align-items: center;
    padding: 0 24rpx;
    box-sizing: border-box;
    .text {
      margin: 0 24rpx;
    }
    .date_choose_div {
      width: 332rpx;
      height: 72rpx;
      border-radius: 88rpx;

      /* 自动布局 */
      display: flex;
      justify-content: center;
      align-items: center;

      /* 纯白 */
      background: #ffffff;

      font-family: PingFang SC;
      font-size: 28rpx;

      /* 文字4 */
      color: #c4c4c4;

      z-index: 0;
      border: 1rpx solid rgba(0, 0, 0, 0.06);
    }
  }
}
.foot_active {
  width: 750rpx;
  height: 116rpx;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: PingFang SC;
  font-size: 32rpx;
  .bt_left {
    width: 344rpx;
    height: 76rpx;
    border-radius: 200rpx;
    color: #252525;
    border: 1rpx solid #c4c4c4;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .bt_right {
    width: 344rpx;
    height: 76rpx;
    border-radius: 200rpx;
    margin-left: 16rpx;
    color: #ffffff;
    background: #0966ff;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>